<template>
    <h1>投资项目信息显示页面</h1>

    投资项目名称:<input type="text" v-model="Name" placeholder="请输入投资项目名称" >
    投资项目总金额:<input type="text" v-model="Money" placeholder="请输入投资项目总金额" >
    <input type="button" value="查询" @click="ShowInvest()" />


    <table class="table table-bordered" border="2" >
        <thead>
            <tr>
                <th>投资项目编号</th>
                <th>投资项目名称</th>
                <th>投资项目总金额</th>
                <th>剩余金额</th>
                <th>用户已投金额</th>
                <th>投资人数</th>
                <th>操作</th>
            </tr>
        </thead>
            
        <tbody>
            <tr v-for="item in Show">
                <td> {{ item.I_Id }} </td>
                <td> {{ item.I_Name }} </td>
                <td> {{ Number(item.I_SumMoney).toFixed(2) }}CNY </td>
                <td> {{ Number(item.I_YMoney).toFixed(2) }}CNY </td>
                <td> {{ Number(item.I_UMoney).toFixed(2) }}CNY </td>
                <td> {{ item.I_Count }} </td>
                <td>
                    <input type="button" value="删除" @click="DelData(item.I_Id)" />
                </td>
            </tr>
        </tbody>

    </table>

</template>

<script setup lang="ts">

import {ref,onMounted} from 'vue'
import axios from 'axios'
//import { useRouter } from 'vue-router';

//const router = useRouter()

//用于显示的响应式数据
const Show = ref([{
    I_Id:'',
    I_Name:'',
    I_SumMoney:'',
    I_YMoney:'',
    I_UMoney:'',
    I_Count:'',
}]);

//用于查询的响应式数据
const Name = ref('');
const Money = ref('');

//生命周期函数
onMounted(()=>{
    ShowInvest(); 
})

//显示 查询 函数
const ShowInvest = ()=>{
    axios({
        method:'get',
        url:'http://localhost:64202/api/Invest/ShowInvest',
        params:{
            Name:Name.value,
            Money:Money.value,
        }
    })
    .then(res=>{
        console.log(res);
        Show.value = res.data;
    })
    .catch(err=>{
        console.log(err)
    })
}

//删除函数
const DelData = (Id:string)=>{

    if(confirm("确定要删除吗？")){
        axios({
            method:'get',
            url:'http://localhost:64202/api/Invest/DelData',
            params:{
                Id:Id,
            }
        })
        .then(res=>{
            if(res.data>0){
                alert('删除成功');
            }
            else{
                alert('删除失败');
            }
            ShowInvest();
        })
        .catch(err=>{
            console.log(err)
        })
    }

    
}

</script>
